<template>
  <mt-popup v-model="visible" position="bottom" class="mint-datetime">
    <mt-picker :slots="slots" valueKey='text' @change="onValuesChange"
               class="mint-datetime-picker"
               ref="pickern"
               show-toolbar>
      <span class="mint-datetime-action mint-datetime-cancel" @click="visible = false">取消</span>
      <span class="mint-datetime-action mint-datetime-confirm" @click="confirm">确定</span>
    </mt-picker>
  </mt-popup>
</template>
<script>
  import constant from '@/common/constant';
  export default {
    data () {
      return {
        visible: false,
        slots: [
          {
            flex: 1,
            values: constant.yearsArray,
            className: 'slot1',
            textAlign: 'center'
          }
        ],
        crtval: ''
      };
    },
    methods: {
      open () { //可以通过$refs调用吗？
        this.visible = true;
        this.$refs.pickern.setSlotValue(0, this.slots[0].values[7]);
        for (var i = 0; i < this.slots[0].values.length; i++) {
          if (this.slots[0].values[i].value === this.$store.state.mintUI.pickernValue[0]) {
            this.$refs.pickern.setSlotValue(0, this.slots[0].values[i]);
          }
        }
      },
      onValuesChange (picker, values) {
        // picker.setSlotValue(0, {text: '2015年', value: 2015});
        // this.$refs.pickerym.setSlotValue(0, '2016年');
        this.crtval = values;
      },
      confirm () {
        this.visible = false;
        this.$store.state.mintUI.pickernCallback(this.crtval);
      }
    },
    mounted: function () {
      this.$store.dispatch('setPickern', this);
    }
  };
</script>
